<script lang="ts">
    import { _ } from "svelte-i18n";
    import { Image } from "../Image";
    import { Text } from "../Typography";
    import { useClassList } from "../utils/useClassList";
    import type { ExceptionProps } from "./Exception";
    import { typeImages } from "./typeImages";

    const props: ExceptionProps = $props();

    const classList = $derived(
        useClassList(props, "cm-exception", {
            [`cm-exception-${props.type}`]: !!props.type,
        }),
    );

    const showDesc = props.showDesc ?? true;

    const defaultDescs = $derived({
        "403": $_("Exception.403"),
        "404": $_("Exception.404"),
        "500": $_("Exception.500"),
        empty: $_("Exception.empty"),
        fail: $_("Exception.fail"),
        deny: $_("Exception.deny"),
    });

    const { type, width, height, desc, action, ...rest } = props;
</script>

<div {...rest} class={classList}>
    <div class="cm-exception-img">
        {#if props.typeImage}
            {@render props.typeImage()}
        {:else}
            <Image src={typeImages(props.type)} width={props.width} height={props.height} />
        {/if}
    </div>
    <div class="cm-exception-info">
        {#if showDesc}
            <div class="cm-exception-desc">
                <Text size="large" type="secondary">
                    {#if props.desc}
                        {props.desc}
                    {:else}
                        {defaultDescs[props.type!]}
                    {/if}
                </Text>
            </div>
        {/if}
        {#if props.action}
            <div class="cm-exception-action">
                {@render props.action()}
            </div>
        {/if}
    </div>
</div>
